<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form">
      <el-form-item label="账号" prop="userAccount">
        <el-input v-model="form.userAccount" placeholder="请输入用户账号"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="form.userName" placeholder="请输入用户姓名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="userPasswd">
        <el-input v-model="form.userPasswd" placeholder="请输入用户密码"></el-input>
      </el-form-item>
      <el-form-item label="籍贯" prop="userPlace">
        <el-input v-model="form.userPlace" placeholder="请输入用户籍贯"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="userTel">
        <el-input v-model="form.userTel" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="userEmail">
        <el-input v-model="form.userEmail" placeholder="请输入电子邮箱"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="userBirth">
          <el-date-picker
            v-model="form.userBirth"
            prop="userBirth"
            type="date"
            placeholder="选择出生日期">
          </el-date-picker>
      </el-form-item>
      <el-form-item label="是否冻结" prop="userHidden">
        <el-switch v-model="form.userHidden"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {userRegister, warehouseAdd, warehouseEdit} from '@/api/user'

export default {
  data() {
    return {
      form: {
        userAccount: '',
        userName: '',
        userPasswd: '',
        userPlace: '',
        userTel: '',
        userEmail: '',
        userBirth: '',
        userHidden: false
      },
      rules: {
        userAccount: [
          {required: true, message: '请输入用户账号', trigger: 'change'}
        ],
        userName: [
          {required: true, message: '请输入用户姓名', trigger: 'change'}
        ],
        userPasswd: [
          {required: true, message: '请输入用户密码', trigger: 'change'}
        ],
        userHidden: [
          {required: true, trigger: 'change'}
        ],
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.userHidden = this.form.userHidden ? 1 : 0
          // console.log(this.form)
          userRegister(this.form).then(res => {
            if (res.data) {
              this.$message({
                message: '注册成功',
                type: 'success'
              })
              this.$router.push({name: 'UserInfo'})
            } else {
              this.$message({
                message: '注册失败',
                type: 'error'
              })
            }
          })
        }
      })
    },
    onCancel() {
      this.$router.push({name: 'UserInfo'})
    }
  }
}
</script>
<style lang="scss">
.container {
  padding: 50px;
  display: flex;
  justify-content: center;

  .form {
    width: 700px;
  }
}
</style>
